<template>
  <div class="container">
    <div class="chat-content">
      <template v-if="chatList && chatList.length">
        <div v-for="(chat, index) in chatList" class="message-box"
          :class="{ 'right-message': chat.user.name === userInfo.user.name }" :key="index">
          <div v-if="chat.user.name !== userInfo.user.name" class="user">
            <el-avatar class="avatar" :src="chat.user.avatar"></el-avatar>
            <div class="info">
              <div class="name">{{ chat.user.name }}</div>
              <div class="time">{{ chat.createTime }}</div>
            </div>
          </div>
          <div v-else class="user">
            <div class="info">
              <div class="time">{{ chat.createTime }}</div>
              <div class="name">{{ chat.user.name }}</div>
            </div>
            <el-avatar class="avatar" :src="chat.user.avatar"></el-avatar>
          </div>
          <div class="message">
            <div class="block">{{ chat.message }}</div>
          </div>
        </div>
      </template>
      <div v-else class="empty">
        没有消息
      </div>
    </div>
    <div class="chat-bottom">
      <el-input v-model="chatMsg" class="chat-input" placeholder="请输入内容" />
      <el-button class="chat-btn" type="primary" @click="sendMsg">发送</el-button>
    </div>
    <!-- <div style="margin-top: 10px;">当前用户：
      <el-select v-model="userInfo.user" value-key="id" @change="selectUser" placeholder="Select">
        <el-option v-for="item in userList" :key="item.id" :label="item.name" :value="item">
        </el-option>
      </el-select>
    </div> -->
  </div>
</template>

<script lang="ts">
import { onMounted, ref, reactive } from 'vue';
import moment from 'moment';
import io from 'socket.io-client';
import vueSocketIo from 'vue-socket.io'
const avatar = 'http://127.0.0.1:3000\\uploads\\avatar\\default_svg.svg';
export default {
  name: 'Chat',
  setup() {
    const chatList = ref<any>([]);
    const chatMsg = ref<any>('');
    const avatarUrl = `http://127.0.0.1:3000\\uploads`+localStorage.getItem('avatarUrl')?.toString();
    const username = localStorage.getItem('username')?.toString();
    const userList = [
      { name: username, id: 0, avatar: avatarUrl }, 
      { name: '张三', id: 1, avatar },
      { name: '李四', id: 2, avatar },
      { name: '王五', id: 3, avatar },
      { name: 'admin', id: 4, avatar },

    ];
    const userInfo = reactive({ user: userList[0] });
    let socket = <any>{};
    chatList.value = []
    //建立websocket连接
    // const socketOptions = {
    //   autoConnect: true,       // 自动连接
    // }
    // let socket = new vueSocketIo({
    //   debug: true,
    //   connection: io('http://127.0.0.1:3000', socketOptions)
    // })
    onMounted(() => {
      socket = io('ws://127.0.0.1:3001');
      socket.on('connect', (data: any) => {
        console.log(socket.id, '监听客户端连接成功-connect');
        chatList.value = data;
      });
      socket.on('fresh-message', (data: any) => {
        console.log('接收到消息')
        chatList.value = data;
      });
    });
    const selectUser = (user: any) => {
      userInfo.user = user;
    };
    const sendMsg = () => {
      socket.emit('send-message', userInfo.user, chatMsg.value);
      console.log()
      const createTime = moment().format('YYYY-MM-DD HH:mm:ss');
      if(chatList.value === undefined) {
        chatList.value = [];
      }
      chatList.value.push({
        user: userInfo.user,
        message: chatMsg.value,
        createTime,
      });
      chatMsg.value = '';
    };

    return {
      chatMsg,
      chatList,
      userList,
      userInfo,
      sendMsg,
      selectUser,
    };
  },
};
</script>

<style lang="scss" scoped>
@mixin flex($align) {
  display: flex;
  align-items: $align;
}

.container {
  padding: 24px;
}

.chat-bottom {
  @include flex(center)
}

.chat-content {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-bottom: none;
  box-sizing: border-box;

  .message-box {
    margin-bottom: 10px;

    .message {
      margin-left: 42px;
      border-radius: 4px;
      box-sizing: border-box;
      margin-top: 5px;
      width: 100%;

      .block {
        display: inline-block;
        font-size: 14px;
        line-height: 1.5;
        border-radius: 4px;
        padding: 8px;
        background-color: #eee;
      }
    }

    .user {
      .avatar {
        width: 32px;
        height: 32px;
        margin-right: 10px;
      }

      @include flex(center);
    }

    .info {
      @include flex(center);
      font-size: 12px;
      color: #999;

      .name {
        margin-right: 10px;
      }
    }

    &.right-message {
      text-align: right;

      .message {
        padding-right: 42px;
        margin-left: auto;
      }

      .user {
        .name {
          margin-right: 0px;
          margin-left: 10px;
        }

        justify-content: flex-end
      }

      .avatar {
        margin-right: 0px;
        margin-left: 10px;
      }
    }
  }
}

.empty {
  font-size: 14px;
  padding: 50px 0;
  text-align: center;
}

.chat-input {
  &:deep(.el-input__inner) {
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    border-bottom-right-radius: 0;
  }
}

.chat-btn {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
}
</style>